<template>
    <div>
        <div class="list">
            <span v-if="!fileList.length" class="default_text">暂无数据</span>
            <div v-else class="flex_just_start width_100">
                <div v-for="(item, i) in fileList" :key="i">
                    <img  v-if="item.url" :src="item.url" :alt="item.name" @click="handlePreview(item)">
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" class="previewImg" alt="Preview Image" />
        </el-dialog>
    </div>
  </template>
  
<script lang="ts" setup>

const props = defineProps({
    fileList: {
        type: Array,
        default: () => { return [] }
    } as any,
})


const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// 预览
const handlePreview = (file: any) => {
    dialogImageUrl.value = file.img_url!
    dialogVisible.value = true
}

</script>

<style lang="scss" scoped>
.list {
    width: 100%;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;


    img {
        display: inline-block;
        width: 148px;
        height: 148px;
        margin-right: 12px;
        cursor: pointer;
    }
}
</style>
  